// /tools/data-export/components/emptyItem
<template>
    <div class="emptyItem content">
        <div>
            <slot name="content"></slot>
        </div>

        <div class="type-name" v-if="isNeedBuy">
            {{typeName}}&nbsp;
            剩余查看次数为
            <span class="num">{{num}}</span>&nbsp;{{unit}}，
            <span>{{dateTip}}</span>
            <el-button type="text" @click="buy">去购买</el-button>
        </div>

        <div v-if="!isNeedBuy">
            {{typeName}}&nbsp;
            剩余查看次数为
            <span class="num">{{num}}</span>&nbsp;{{unit}}，
            <span>{{dateTip}}</span>
            <el-button type="text" @click="look"> 查看</el-button>
        </div>
    </div>
</template>

<script>
import DialogProduct from '@/pages/user/center/components/dialog-product.vue';
import { mapGetters, mapActions } from 'vuex';

export default {
    name: '',
    props: {
        action: {
            type: String,
            default: '',
        },
        typeName: {
            type: String,
            default: '',
        },
        dateTip: {
            type: String,
            default: '',
        },

        num: {
            type: [String, Number],
            default: 0,
        },
        unit: {
            type: String,
            default: '条',
        },
        //是否需要购买次数
        isNeedBuy: {
            type: Boolean,
            default: true,
        },
    },
    components: { DialogProduct },
    data() {
        return {
            dialogVisible: false,
            projectid: '',
        };
    },
    mounted() {},
    methods: {
        queryStatisticData() {
            this.$emit('close');
        },

        buy(ids) {
            this.$emit('buy')
        },
        look() {
            this.$emit('look');
        },

        //获取次数。
        getNums() {
            //是否登录
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                // this.exportData();
                // 是否有剩余次数. 有-> ，doMouthed 请求接口。 无显示无次数页面，去购买次数。
            });
        },
    },
    watch: {},
};
</script>

<style lang="scss" scoped>
.emptyItem {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
